<template>

  <div>

    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
    >

      <el-table-column
        prop="id"
        label="id"
        width="180"
      />

      <el-table-column
        prop="name"
        label="name"
        width="180"
      />

      <el-table-column
        prop="corporation"
        label="corporation"
      />

      <!--3333333333333333333333333333333333333333333333333333333333333333-->

      <el-table-column
        prop="address"
        label="address"
        width="180"
      />

      <el-table-column
        prop="type"
        label="type"
        width="180"
      />

      <el-table-column
        prop="status"
        label="status"
      />

      <!--3333333333333333333333333333333333333333333333333333333333333333-->
      <el-table-column
        prop="userName"
        label="userName"
        width="180"
      />
      <el-table-column label="操作">
        <template slot-scope="scope">

          <el-button
            size="mini"
            type="success"
            @click="handleDetail(scope.row)"
          >详情</el-button>

        </template>
      </el-table-column>

      <!--3333333333333333333333333333333333333333333333333333333333333333-->

    </el-table>

    <!--    =======================分页 分页 分页 分页 分页 分页 分页======================================-->

    <div class="block">
      <span class="demonstration">完整功能</span>
      <el-pagination
        :current-page="current"
        :page-sizes="[3, 4, 10]"

        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

    </div>
    <!--    =======================分页 分页 分页 分页 分页 分页 分页   end======================================-->

    <!--  addaddaddaddaddaddaddaddaddaddaddadd   st-->
    <!--      表单表单表单表单表单表单表单表单表单表单表单表单表单表单表单表单 st -->
    <!--      表单表单表单表单表单表单表单表单表单表单表单表单表单表单表单表单  ed-->
    <!--  addaddaddaddaddaddaddaddaddaddaddadd   ed-->

    <!--updupdupdupdupdupdupd  st-->

    <!--updupdupdupdupdupdupd  ed-->

    <!--  detal detal detal detal detal detal st-->

    <!-- ---------///////////////详情对话框开始//////////////////-------------   -->
    <el-dialog
      title="个人详情"
      :visible.sync="userDialog"
      width="30%"
      center
    >
      <span>
        <div>商户ID：{{ user.id }}</div>
        <div>商户名称：{{ user.name }}</div>
        <div>法人：{{ user.corporation }}</div>

        <div>地址：{{ user.address }}</div>
        <div>类型：{{ user.type }}</div>
        <div>状态：{{ user.status }}</div>

        <div>管理员：{{ user.userName }}</div>

        <!--申请时间-->

        <div>

          <!--           -->
          <el-button
            size="mini"
            type="success"
            @click="yestg()"
          >通过</el-button>

          <!--          <template slot-scope="scope">-->
          <el-button
            size="mini"
            type="success"
            @click="notg()"
          >不通过</el-button>
          <!--        </template>-->

          <el-button
            size="mini"
            type="success"
          >返回</el-button>

        </div>

      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userDialog = false">取 消</el-button>
        <el-button type="primary" @click="userDialog = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- ---------///////////////详情对话框结束//////////////////-------------   -->

    <!--  detal detal detal detal detal detal ed-->

    <!--  del del del del del del del del del del st-->
    <!--  del del del del del del del del del del ed-->

    <!--  dels dels dels dels dels dels dels dels  st-->

    <!--  dels dels dels dels dels dels dels dels  ed-->

  </div>

</template>

<script>
export default {
  name: 'About',
  data() {
    return {
      tableData: [],
      current: 1,
      size: 10,
      total: 0,
      user: {},
      userDialog: false

    }
  }, created() {
    this.initData()
  }, methods:
    {
      // http://localhost:9999/system-management/sysDept/list
      initData() {
        this.axios.get('http://localhost:9999/system-management/tbBusiness/list',

          {
            params: {
              current: this.current,
              size: this.size
            }
          }
        ).then((response) => {
          this.tableData = response.data.records

          this.total = response.data.total
        })
      },
      handleSizeChange(val) {
        this.size = val
        this.initData()
      },

      handleCurrentChange(val) {
        this.current = val
        this.initData()
      },
      handleDetail(row) {
        this.user = row
        this.userDialog = true// 打开对话框
      },
      yestg() {
        // alert(this.user.id)
        this.axios.get('http://localhost:9999/system-management/tbBusiness/audit',

          {
            params: {
              id: this.user.id
            }
          }
        ).then((response) => {
          alert(response.data)
          this.userDialog = false// 关闭对话框
          this.initData()
        })
      }, notg() {
        // alert(this.user.id)
        this.axios.get('http://localhost:9999/system-management/tbBusiness/update',

          {
            params: {
              id: this.user.id
            }
          }
        ).then((response) => {
          this.userDialog = false// 关闭对话框
          this.initData()
        })
      }// metho
    }
}
</script>

<style scoped>

</style>

